<template>
  <div class="demo-box">
    <div id="map" class="map"></div>
  </div>
</template>

<script>
  export default {
    name: 'Demo1',
    data() {
      return {};
    },
    mounted() {
      this.$nextTick(() => {
        const DMap = window.DMap;
        const map = new DMap.Map(document.getElementById('map'));
        map.showZoomBarControl(); // 缩放等级
        map.showOverviewMap(); // 鹰眼
        map.showMapTypeControl(); // 地图addControl(new DMap.MapTypeControl());
        map.showScaleControl(); // 比例尺addControl(new DMap.ScaleControl());
        map.showCopyright(); // 版权
        // 创建工具栏
        var toolBar = new DMap.ToolBarControl();
        map.addControl(toolBar);
        const point = new DMap.LonLat(106.47547300000001, 29.672801);
        var addressSymble = {
          type: 3,
          url: '/static/img/vehicle.png',
          size: new DMap.Size(90, 89),
          offsetType: 'mm',
          borderWidth: 4,
          borderColor: 'red',
          color: 'white',
          opacity: 1,
          transform: 'rotate(110deg)'
          // markText: '测试',
          // markTextColor: '#FFFFFF',
          // markTextFontSize: 24
        };
        const marker = new DMap.Marker(point, addressSymble);
        map.addOverlay(marker);
        marker.rotate(30, marker);

        console.log('map.getZoom()', map.getZoom());
      });
    }
  };
</script>
<style lang="less">
  .demo-box {
    width: 1024px;
    height: 600px;
    margin: 20px;
    border: 1px solid blue;
  }

  .map {
    position: relative;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
  }
</style>
